<script setup lang="ts" name="LuckyWheel2">
import bg from '@/assets/lottery/luckyWheel/luckyWheel2/bg.png'
import button from '@/assets/lottery/luckyWheel/luckyWheel2/btn.png'
import img01 from '@/assets/lottery/luckyWheel/luckyWheel2/01.png'
import img02 from '@/assets/lottery/luckyWheel/luckyWheel2/02.png'
import img03 from '@/assets/lottery/luckyWheel/luckyWheel2/03.png'
import img04 from '@/assets/lottery/luckyWheel/luckyWheel2/04.png'
import img05 from '@/assets/lottery/luckyWheel/luckyWheel2/05.png'
import img06 from '@/assets/lottery/luckyWheel/luckyWheel2/06.png'
import { lottery } from '@/api/lottery'
const luckyWheelRef = ref(null)

const initInfo = ref({
  blocks: [
    { padding: '2.1vw', imgs: [
      { src: bg, top: 0, width: '100%', height: '100%', rotate: false }
    ] }
  ],
  prizes: [
    { background: '#fecf9c', fonts: [{ text: '谢谢参与', top: 15, fontSize: 12 }], imgs: [{ src: img01, top: '55%', width: '1.8vw', height: '1.8vw' }] },
    { background: '#ffffff', fonts: [{ text: '500元红包', top: 15, fontSize: 12 }], imgs: [{ src: img02, top: '55%', width: '1.8vw', height: '1.8vw' }] },
    { background: '#fecf9c', fonts: [{ text: '老婆一个', top: 15, fontSize: 12 }], imgs: [{ src: img03, top: '55%', width: '1.8vw', height: '1.8vw' }] },
    { background: '#ffffff', fonts: [{ text: '清空购物车', top: 15, fontSize: 12 }], imgs: [{ src: img04, top: '55%', width: '1.8vw', height: '1.8vw' }] },
    { background: '#fecf9c', fonts: [{ text: 'ipad一个', top: 15, fontSize: 12 }], imgs: [{ src: img05, top: '55%', width: '1.8vw', height: '1.8vw' }] },
    { background: '#ffffff', fonts: [{ text: '购物卡一张', top: 15, fontSize: 12 }], imgs: [{ src: img06, top: '55%', width: '1.8vw', height: '1.8vw' }] }
  ],
  buttons: [
    { radius: '36%', imgs: [{ src: button, top: '-100%', width: '100%', height: '100%' }] },
    { radius: '28%', fonts: [
      { text: '开始', top: '-7px', fontColor: '#fff', fontSize: '12px' }
    ] },
    { radius: '30%', fonts: [
      { text: '抽奖', top: '7px', fontColor: '#fff', fontSize: '12px' }
    ] }
  ],
  defaultConfig: {
    offsetDegree: -360 / 6 / 2
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyWheelRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyWheelRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>大转盘-自定义</span>
      </div>
    </template>
    <div class="lucky-wheel">
      <div class="lucky-wheel-pane">
        <LuckyWheel ref="luckyWheelRef" width="15.625vw" height="15.625vw" :prizes="initInfo.prizes" :blocks="initInfo.blocks" :buttons="initInfo.buttons" :defaultConfig="initInfo.defaultConfig" @start="startCallback" @end="endCallback"></LuckyWheel>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card{
  :deep(.el-card__body) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg,#fc6979 0,#c71d33 50%,#c71d33);
  }

  .lucky-wheel{
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.lucky-wheel-pane{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.625vw;
  height: 15.625vw;
  margin: 1.8vw auto;

  .lucky-wheel-pointer{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 36px;
    height: 48px;
    margin-left: -20px;
  }
}
</style>
